
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - Bootstrap Table</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">


    <!--
  dataTable
   <link href=" https://cdn.datatables.net/1.10.19/css/dataTables.semanticui.min.css" rel="stylesheet">
   semantic 的样式
   <link href=" https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
    -->

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form class="form-inline" role="form">
                <div class="form-group">
                    用户名
                    <input type="text" class="form-control" id="username" >
                </div>
                <button type="button" id="search" class="btn btn-default">查找</button>
            </form>
        </div>
    </div>
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <div>
                        <button id="add" class="btn btn-default">新增</button>
                        <button id="delete" class="btn btn-default">禁用</button>
                        <button id="open" class="btn btn-default">启用</button>
                    </div>
                    <!--
                    <table id="example" class="ui celled table" style="width:100%">
                        <thead>
                        <tr>
                            <th><input id="checkAll" type="checkbox"></th>
                            <th>用户名</th>
                            <th>电话</th>
                            <th>是否删除</th>
                            <th>创建者</th>
                            <th>创建时间</th>
                            <th>更新者</th>
                            <th>更新时间</th>
                        </tr>
                        </thead>
                    </table>
                    -->
                    <table id="table">

                    </table>

                </div>
            </div>
        </div>
    </div>


    <!-- End Panel Other -->
</div>

<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- layer -->
<script src="/static/js/plugins/layer/layer.min.js"></script>

<!-- datatable
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.semanticui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
-->

<!-- Peity -->
<script >

    $("#add").click(function(){
        layer.open({
            type: 2,
            area:['100%','100%'],
            maxmin: true,
            content: '/user/add' //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    });

    $("#delete").click(function(){
        console.log("is click");
        var a= $("#table").bootstrapTable('getSelections');
        if(a.length<=0){
            alert("请选中一行")
        }else{
            var b=JSON.stringify( a );
            var ids = "";
            for(var i=0;i< a.length;i++){
                ids += "," + a[i].userId ;
            }
            ids = ids.substring(1);
            console.log(ids);
            $.ajax({
                url:"/user",
                type:"POST",
                data:{
                    _method:'delete',
                    ids:ids
                },
                success:function(result){
                    flushTable();
                    console.log(result);
                }
            });
        }
    });

    $("#open").click(function(){
        console.log("is click");
        var a= $("#table").bootstrapTable('getSelections');
        if(a.length<=0){
            alert("请选中一行")
        }else{
            var b=JSON.stringify( a );
            var ids = "";
            for(var i=0;i< a.length;i++){
                ids += "," + a[i].userId ;
            }
            ids = ids.substring(1);
            console.log(ids);
            $.ajax({
                url:"/user/open",
                type:"POST",
                data:{
                    _method:'put',
                    ids:ids
                },
                success:function(result){
                    flushTable();
                    console.log(result);
                }
            });

        }
    });

    $(document).ready(function() {

        $("#table").bootstrapTable({
            method: 'get',
            url:'/user/findAll',
            cache: false,
            //height: 400,
            striped: true,
            pagination: true,
            queryParams:queryParams,
            responseHandler:responseHandler,
            pageNumber:1,
            pageList: [10, 20, 50, 100, 200, 500],
            sidePagination:'server',               //客户端分页还是服务端分页
            search: false,                         //是否显示上边的搜索
            showColumns: true,
            showRefresh: false,
            showExport: false,
            sortable: true,                       //是否排序
            exportTypes: ['csv','txt','xml'],   //导出文件格式
            clickToSelect: false,             //是否开启点击row 选中checkbox
            queryParamsType: 'limit',
            columns:
                    [
                        {field:"checked",checkbox:true},
                        {field:"userId",title:"id",align:"center",valign:"middle",sortable:"true"},
                        {field:"username",title:"用户名",align:"center",valign:"middle",sortable:"true"},
                        {field:"phone",title:"电话",align:"center",valign:"middle",sortable:"true"},
                        {field:"deleteFlag",title:"删除标志",align:"center",valign:"middle",formatter:function(value,row,index){

                                if(row['deleteFlag'] === 0){
                                    return "否";
                                } else if(row['deleteFlag'] === 1){
                                    return "是";
                                }
                        }},
                        {field:"createUser",title:"创建者",align:"center",valign:"middle",sortable:"true"},
                        {field:"createTime",title:"创建时间",align:"center",valign:"middle",sortable:"true"},
                        {field:"updateUser",title:"更新者",align:"center",valign:"middle",sortable:"true"},
                        {field:"updateTime",title:"更新时间",align:"center",valign:"middle",sortable:"true"},
                        {field:"operate",title:"操作",events:operateEvents1,formatter:operateFormatter}
                    ]
        });

    });


    window.operateEvents1 = {
        'click .RoleOfB': function(e,value,row,index){
            layer.open({
                type: 2,
                area:['60%','60%'],
                maxmin: true,
                content: '/user/bindRole/' + row.userId, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                btn: ['确定', '取消']
                ,yes: function(index,layero){
                    //按钮【按钮一】的回调
                    var newpsw = window[layero.find('iframe')[0]['name']];
                    var value = newpsw.getChoseId();
                    // console.log(JSON.stringify( value ));
                    // alert(JSON.stringify( value ));
                    layer.close(index);
                    $.ajax({
                        url:"userRole",
                        type:'POST',
                        data:{
                            userId:row.userId,
                            roleIds:JSON.stringify(value)
                        },success:function(result){
                            if(result.msg == 'success'){
                                console.log('success');
                                layer.msg("分配角色成功");
                            } else{
                                layer.msg("分配角色失败");
                            }
                        }
                    });

                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                },cancel: function(){
                    //右上角关闭回调
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        }
    };

    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfB btn-default bt-select">分配角色</button>',
        ].join('');
    }




    /*
    *   往服务器传参处理
    * */
    function queryParams(params) {  //bootstrapTable自带参数
        var current = params.offset / params.limit + 1;
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            size: params.limit ,   //页面大小//params.limit
            current: current,  //页码 // params.offset + 1
            username:  $("#username").val(),     //传递模糊查询参数
            sort: params.sort,  //排序列名
            sortOrder: params.order//排位命令（desc，asc）
        };
        return temp;
    }

    /**
     *   服务器返回值值，处理
     * */
    function responseHandler(res){
        console.log(res);
        var temp = {
            total: res.recordsTotal,
            rows: res.data
        }
        return temp;
    }


    /**
     *   搜索按钮点击以后，要刷新页面
     *
     * */
    $("#search").click(function(){
        flushTable();
    });

    //刷新表格
    function flushTable(){
        $("#table").bootstrapTable('refresh', {url: '/user/findAll' });
    }


    /*
    *  使用datatable
    *
    * */
    // $('#example').DataTable( {
    //     "searching" : false,   //去掉搜索框
    //     "processing": true,
    //     "serverSide": true,
    //     "ordering": false,
    //     "bLengthChange": false,   //去掉每页显示多少条数据方法
    //     "ajax":{
    //         "url":"/user/getAll",
    //         "data": function ( d ) {
    //             d.current = d.start + 1;
    //             d.size = d.length;
    //         },
    //     },
    //     "columns": [
    //         {"data":"checked"},
    //         { "data": "username" },
    //         { "data": "phone" },
    //         { "data": "deleteFlag" },
    //         { "data": "createUser" },
    //         { "data": "createTime" },
    //         { "data": "updateUser" },
    //         { "data": "updateTime" }
    //     ],"columnDefs": [
    //         // 将Salary列变为红色checked
    //         {
    //             "targets": [0], // 目标列位置，下标从0开始
    //             "data": "checked", // 数据列名
    //             "render": function(data, type, full) { // 返回自定义内容
    //                 return '<input class="checkbox" type="checkbox">';
    //             }
    //         },
    //         {
    //             "targets": [3], // 目标列位置，下标从0开始
    //             "data": "deleteFlag", // 数据列名
    //             "render": function(data, type, full) { // 返回自定义内容
    //                 if(data == 0){
    //                     return "否";
    //                 } else {
    //                     return "是";
    //                 }
    //             }
    //         }
    //         //,
    //         // 增加一列，包括删除和修改，同时将我们需要传递的数据传递到链接中
    //         // {
    //         //     "targets": [6], // 目标列位置，下标从0开始
    //         //     "data": "name", // 数据列名
    //         //     "render": function(data, type, full) { // 返回自定义内容
    //         //         return "<a href='/delete?name=" + data + "'>Delete</a>&nbsp;<a href='/update?name=" + data + "'>Update</a>";
    //         //     }
    //         // }
    //     ],"oLanguage": {
    //         "sLengthMenu": "每页显示 _MENU_ 条记录",
    //         "sZeroRecords": "抱歉， 没有找到",
    //         "sInfo": "从  _START_  到  _END_  /共  _TOTAL_  条数据",
    //         "sInfoEmpty": "没有数据",
    //         "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
    //         "oPaginate": {
    //             "sFirst": "首页",
    //             "sPrevious": "前一页",
    //             "sNext": "后一页",
    //             "sLast": "尾页"
    //         }
    //     }
    // } );


    $("#checkAll").click(function(){
        if(this.checked){
            $(".checkbox").prop("checked", true);
    }else{
        $(".checkbox").prop("checked", false);
    }
    });

    $("#delete").click(function(){

       // var data =  $("example").DataTable().row().cache();
        var apend = "";
        $(".checkbox").each(function(){
            if($(this).prop("checked")){
                $(this).prop("checked")
                apend += ",";
            }
        });
        alert(apend);
    });

</script>

</body>
</html>
